<template>
  <div class="links">
    <h2>友情链接</h2>
    <div class="content">
        <el-card v-for="(item,index) in links" :key="index" shadow="hover">
            <a :href="item.href" target="_blank">
              <img :src="'https://ico.mikelin.cn/'+item.href" class="site_icon">
              <span>{{item.name}}</span>
            </a>
            <p>{{item.desc != null ? item.desc : item.name}}</p>
        </el-card>
    </div>
    <ApplyLink></ApplyLink>
  </div>
</template>

<script>
import ApplyLink from '@/components/ApplyLink'
import {getLinkList} from '@/api/link';
let _this
export default {
  name: 'Link',
  components:{
    ApplyLink
  },
  data () {
    return {
        links:[]
    }
  },
  mounted(){
    // 拉取该文件夹下所有文件信息
  },
  created(){
    _this = this
    this.getLinkList()
  },
  methods:{
    getLinkList(){
      getLinkList().then(res=>{
        _this.links = res.data
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.links
  width 65%
  text-align center
  h2
    line-height 100px
    color #555
    font-weight 500
  .content
    width 100%
    display flex
    flex-wrap wrap 
    .el-card
      margin 0 10px 20px
      width 23%
      box-sizing: border-box;
      text-align left 
      background-color unset
      a
        display block
        padding 0 20px
        img 
          width 15px
          height 15px
          display inline-block
          vertical-align middle
      p
        clear: both;
        display: -webkit-box;
        overflow: hidden;
        margin-top: 1rem;
        height: 60px;
        text-overflow: ellipsis;
        font-size: 13px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-height 1.5
    .el-link
      width 18%
      padding 10px 20px
      box-sizing border-box
      text-align center
      background #e5e9f2
      margin 10px
      img 
        width 15px
        height 15px
        display inline-block
        vertical-align middle
</style>
